<template>
    <div>
        <h1>房型增加</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td><input type="text" v-model="info.rootname" /></td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td>
                        <input type="file" @change="getphoto" />
                        <img :src="info.photo" alt="" width="100" height="100">
                    </td>
                </tr>
                <tr>
                    <td>数量</td>
                    <td><input type="text" v-model="info.num" /></td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" v-model="info.state" :value="1" name="state" />是
                        <input type="radio" v-model="info.state" :value="0" name="state" />否
                    </td>
                </tr>
                <tr>
                    <td>开始时间</td>
                    <td><input type="date" v-model="info.datetime" /></td>
                </tr>
                <tr>
                    <td>结束时间</td>
                    <td><input type="date" v-model="info.update" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="增加" @click="ok" /></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { onMounted,reactive,ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios'

const route=useRoute();
const router=useRouter();

const info=reactive({
    rootname:'',
    photo:'',
    num:'',
    state:1,
    datetime:'',
    update:'',
})

//图片
const getphoto=(e:any)=>{
    let file=e.target.files[0];
    let formdata=new FormData();
    formdata.append("file",file);
    axios({
        url:'/api/Imgurl/GetImgurl',
        method:'post',
        data:formdata
    })
    .then(res=>{
        console.log(res);
        info.photo=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

//添加
const ok=()=>{
    if(info.rootname==""){
        alert('房型名称不能为空!');
        return;
    }
    if(info.photo==""){
        alert('图片不能为空!');
        return;
    }
    if(info.num==""){
        alert('数量不能为空!');
        return;
    }
    if(info.datetime==""){
        alert('开始时间不能为空!');
        return;
    }
    if(info.update==""){
        alert('结束时间不能为空!');
        return;
    }
    axios({
        url:'/api/Root/Add',
        method:'post',
        data:info
    })
    .then(res=>{
        if(res.data>0){
            alert('增加成功!');
            router.push('/RootList');
        }
        else{
            alert('增加失败!');
        }
    })
}


</script>